<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.left,
			.right,
			.but {
				width: 90px;
				height: 100px;
				display: inline-block;
			}

		/* 	span {
				display: inline-block;
				width: 30px;
				text-align: center;

			} */
			
			select{
				height: 100%;
				width: 90px;
				margin: 10px;
				overflow: hidden;
			}

			.box {
				margin: auto;
				width: 100px;
				display: flex;
			}

			.but {
				margin: 15px;
			}

			button {
				margin: 5px;
			}

			.selected {
				background-color: cornflowerblue;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="left">
				<select multiple>
					<option>a</option>
					<option>b</option>
					<option>c</option>
					<option>d</option>
				</select>
				
			</div>

			<div class="but">
				<button onclick="mv('right')"> >> </button>
				<button onclick="mv('left')">	<< </button>
			</div>
			<div class="right">
				<select multiple>
					<option>1</option>
					<option>2</option>
					<option>3</option>
					<option>4</option>
				</select>
			</div>

		</div>

	</body>
</html>
<script>
	
	function mv(des){
		let src = des == 'right' ? 'left' : 'right';
		
		
		//获取左侧待选项
		let left_div = document.getElementsByClassName(src)[0]
		let select_obj_arr = left_div.querySelectorAll("option:checked");//通过选择器获取元素  可以直接获取到被选中的元素
		console.log(select_obj_arr);
		
		//移动
		// let right_div = document.getElementsByClassName("right")[0];
		// let right_select = right_div.children[0];
		
		let right_select = document.querySelector("."+des+" > select")
		
		for(let i=0;i<select_obj_arr.length;i++){
			let obj = select_obj_arr[i];
			right_select.appendChild(obj);
			
		}
		
		
	}
	
</script>
